说明

本文转自菜鸟教程。

JQuery遍历

JQuery遍历用于根据相对于其他元素的关系来查找HTML元素，通过JQuery遍历，可以从被选的元素开始，轻松的在家族树中向上移动，向下移动，水平移动，这种移动称为对DOM进行遍历。

JQuery遍历-祖先

向上遍历DOM树

主要有以下这些方法：

  • parent()
  • parents()
  • parentsUntil()

JQuery parent()方法

parent()返回被选元素的直接父元素，该方法只会向上一级对DOM树进行遍历，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
  <div style="width:500px;">div (祖父元素)   
    <p>p (父元素)
        <span>span</span>
      </p> 
  </div>
</div>
</body>
</html>

JQuery parents()方法

parents()方法返回被选元素的所有祖先元素，它一路直到文档的根元素（<html>），举个例子：

1
2
3
$(document).ready(function(){
  	$("span").parents();
});

当然也可以使用可选参数来过滤祖先元素的搜索，例如：

1
2
3
$(document).ready(function() {
  	$("span").parents("ul");
});

上面的代码将返回所有<span>元素的所有祖先，并且它是<ul>元素。

JQuery parentsUntil()方法

parentUtil()方法返回介于两个给定元素之间的所有祖先元素，例如：

1
2
3
$(document).ready(function() {
  	$("span").parentsUtil("div");
});

需要注意的是不包含parentsUtil()参数的祖先元素的。

JQuery遍历-后代

JQuery children()方法

children()方法返回被选元素的所有直接子元素，该方法只会向下一级对DOM树进行遍历，例如：

1
2
3
$(document).ready(function() {
  	$("div").children();
});

同样地你可以使用可选参数来过滤对子元素的搜索，例如：

1
2
3
$(document).ready(function() {
  	$("div").children("p.1");
});

上面的代码中将返回类名为”1”的所有p元素，并且它们是<div>的直接子元素。

JQuery find()方法

find()方法返回被选元素的后代元素，一路向下直到最后一个后代，例如：

1
2
3
$(document).ready(function() {
  	$("div").find("span");
});

上面的代码将返回属于<div>后代的所有<span>元素。

1
2
3
$(document).ready(function(){
  	$("div").find("*");
});

上面的代码将返回属于<div>后代的所有元素。

JQuery遍历-同胞

有下面这些方法可以在DOM树进行水平遍历：

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

JQuery siblings()方法

siblings()方法返回被选元素的所有同胞元素，例如：

1
2
3
$(document).ready(function() {
  	$("h2").siblings();
});

当然也可以使用可选参数对同胞元素进行过滤：

1
2
3
$(document).ready(function() {
  	$("h2").siblings("p");
});

上面的代码将返回属于<h2>的同胞元素的所有<p>元素。

JQuery next()方法

next()方法返回被选元素的下一个同胞元素，该方法只返回一个元素：

1
2
3
$(document).ready(function() {
  	$("h2").next();
});

JQuery nextAll()方法

nextAll()返回被选元素的所有跟随的同胞元素：

1
2
3
$(document).ready(function() {
  	$("h2").nextAll();
});

JQuery nextUntil()方法

nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素：

1
2
3
$(document).ready(function() {
  	$("h2").nextUntil("h6");
});

另外三个方法不加以介绍，和上面几个方法道理相同。

JQuery遍历-过滤

JQuery first()

first()返回被选元素的首个元素，例如：

1
2
3
$(document).ready(function() {
  	$("div p").first();
});

上面的代码选取首个<div>元素内部的第一个<p>元素。

JQuery last()

last()方法返回被选元素的最后一个元素：

1
2
3
$(document).ready(function() {
  	$("div p").last();
});

上面的代码选择最后一个<div>元素中的最后一个<p>元素。

JQuery eq()方法

eq()方法返回被选元素中带有指定索引号的元素，索引号从0开始，因此首个元素的索引号是0而不是1：

1
2
3
$(document).ready(function() {
  	$("p").eq(1);
});

上面的代码选取第二个<p>元素。

JQuery filter()方法

filter()返回匹配的元素：

1
2
3
$(document).ready(function() {
  	$("p").filter(".url");
});

上面的代码返回带有类名”url”的所有<p>元素。

JQuery not()方法

not()方法返回不匹配标准的所有元素：

1
2
3
$(document).ready(function() {
  	$("p").not(".url");
});

上面的代码返回不带有类名”url”的所有<p>元素。